{layout name="layout/sharewifi" /}
<div class="row-content am-cf">
    <div id="my-form" class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-body tpl-form-line-form am-form">
                    <fieldset>
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">轮播图片</div>
                        </div>
                        <div class="swiper">
                            <div class="item" v-for="(item, index) in list"> 
                                <i class="iconfont iconshanchu delete-icon" @click="itemDelele(index)"></i>	
            				    <div class="am-form-group"> 
								    <label class="am-u-sm-3 am-form-label am-text-xs">轮播类型</label>
									<div class="am-u-sm-7 am-u-end"> 
									    <label class="am-radio-inline"> 
									        <input type="radio" value="image" v-model="item.type"> 图片 
									    </label> 
									    <label class="am-radio-inline"> 
									        <input type="radio" value="video" v-model="item.type"> 视频 
									    </label> 
								    </div>
								</div>
								<div class="am-form-group"> 
								    <label class="am-u-sm-3 am-form-label am-text-xs">{{item.type == 'image'?'轮播':'封面'}}图片</label>
									<div class="am-u-sm-8 am-u-end">
										<div v-if="item.type == 'image'"> 
										    <img class="image" :src="item.image" @click="selectImage(index,'image')"> 
										</div>
										<div v-if="item.type == 'video'"> 
										    <img class="image" :src="item.poster" @click="selectImage(index, 'poster')"> 
										</div>
										<div class="help-block"> 
										    <small>建议尺寸：宽710 高240，单位PX</small> 
										</div>
									</div>
								</div>
								<div v-if="item.type == 'video'" class="am-form-group"> 
								    <label class="am-u-sm-3 am-form-label am-text-xs">视频地址</label>
									<div class="am-u-sm-8 am-u-end"> 
									    <input type="text" v-model='item.image'> 
									</div>
								</div>
								<div v-if="item.type == 'image'" class="am-form-group"> 
								    <label class="am-u-sm-3 am-form-label am-text-xs">链接地址</label>
									<div class="am-u-sm-8 am-u-end"> 
									    <input type="text" v-model='item.url'> 
									</div>
								</div>
                			</div>
            				<div class="item" @click="itemAdd"> 
            				    <div class="add"><i class="iconfont icontianjia"></i></div>
            				</div>
                        </div>
                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-5 am-margin-top-lg">
                                <button @click="onSubmit"  class="am-btn am-btn-secondary">提交
                                </button>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 文件库弹窗 -->
{include file="../addons/upload/view/template/file_library.html" /}
<script src="/assets/plugins/vue/vue.min.js?v={$version}"></script>
<script>
    $(function () {
        // 渲染页面
		new Vue({
			el: '#my-form',
			data: {
				list: <?= json_encode($model) ?>,
				temp:{
				    type: 'image',
					image: BASE_URL + 'addons/sharewifi/img/swiper.png',
					url: '',
					poster: BASE_URL + 'addons/sharewifi/img/swiper.png'
				}
			},
			methods: {
			    //添加
                itemAdd: function() {
                    let _this = this;
                    _this.list.push(_this.temp);
                },
			    //删除
                itemDelele: function(index) {
                    let _this = this;
                    layer.confirm('你确定要删除吗？',{
                        icon: 0,
                        btn:['取消','确定'],
                        title: '友情提示',
                        skin: 'layui-layer-hema',
                        cancel : function(){
                            // 你点击右上角 X 回调
                        },
                        btn1:function(layero){
							layer.close(layero);
                        },
                        btn2:function(layero){
                            _this.list.splice(index, 1);
                            layer.close(layero);
                        },
                        end:function() {
                            //所有操作都会执行
						}
					})
                },
				//选择图片
                selectImage: function(index, name) {
                    let _this = this;
                    $.fileLibrary({
                        type: 'image',
                        done: function(img) {
							_this.list[index][name] = img[0].url;
                        }
                    })
                },
		    	//提交保存
                onSubmit: function() {
                    let _this = this;
                    if (_this.list.length <= 0) {
                        layer.msg('至少存在一条记录', {anim: 6});
                        return false
                    };
                    $.post('/store/sharewifi.applet/swiper', {
                        //data: JSON.stringify(this.diyData)
						data: _this.list
                    }, function(result) {
                        if(typeof(result)=='string'){
                            result = JSON.parse(result);
                        }
                        result.code == 1 ? $.show_success(result.msg, result.url) : $.show_error(result.msg);
                    })
                }
			}
		});
    });
</script>